<template>
    <div class="wh-full">
        <div class="wh-full pr" style="z-index:1">
            <el-row type="flex" style="height: auto;min-height: 20%;" justify="space-between">
                <el-col :span="6" class="card">
                    <div class="card1 wh-full">
                        <p class="tip">累计保费金额（ 元 ） <img src="../../assets/img/bzxt_safe_ data_warningcircle.png" /></p>
                        <div class="flex">
                            <p class="tips">周同比<img src="../../assets/img/bzxt_safe_ data_down.png" /> <span>11%</span></p>
                            <p class="tips">日环比<img src="../../assets/img/bzxt_safe_ data_up.png" /> <span>12%</span></p>
                        </div>
                        <p class="total">130,892</p>
                    </div>
                </el-col>
                <el-col :span="6" class="card">
                    <div class="card2 wh-full">
                        <p class="tip">累计保单数 <img src="../../assets/img/bzxt_safe_ data_warningcircle.png" /></p>
                        <div class="flex">
                            <p class="tips">周同比<img src="../../assets/img/bzxt_safe_ data_down.png" /> <span>11%</span></p>
                            <p class="tips">日环比<img src="../../assets/img/bzxt_safe_ data_up.png" /> <span>12%</span></p>
                        </div>
                        <p class="total">26,368</p>
                    </div>
                </el-col>
                <el-col :span="6" class="card">
                    <div class="card3 wh-full">
                        <p class="tip">累计服务车辆数 <img src="../../assets/img/bzxt_safe_ data_warningcircle.png" /></p>
                        <div class="flex">
                            <p class="tips">周同比<img src="../../assets/img/bzxt_safe_ data_down.png" /> <span>11%</span></p>
                            <p class="tips">日环比<img src="../../assets/img/bzxt_safe_ data_up.png" /> <span>12%</span></p>
                        </div>
                        <p class="total">4,121</p>
                    </div>
                </el-col>
                <el-col :span="6" class="card">
                    <div class="card4 wh-full">
                        <p class="tip">累计发送奖励金（ 元 ） <img src="../../assets/img/bzxt_safe_ data_warningcircle.png" /></p>
                        <div class="flex">
                            <p class="tips">周同比<img src="../../assets/img/bzxt_safe_ data_down.png" /> <span>11%</span></p>
                            <p class="tips">日环比<img src="../../assets/img/bzxt_safe_ data_up.png" /> <span>12%</span></p>
                        </div>
                        <p class="total">8,271</p>
                    </div>
                </el-col>
            </el-row>
            <div class="flex flex-ai-center pr" name="map">
                <div class="rdSty flex">
                    <div class="rd flex flex-jc-center" @click="changeRd(1)" :class="activeClass == 1?'active':''">保费地区分布图</div>
                    <div class="rd flex flex-jc-center" @click="changeRd(2)" :class="activeClass == 2?'active':''">续保地区分布图</div>
                </div>
                <div id="main" class="" style="width: 80%;height: 800px;"></div>
                <div class="rankSty flex flex-col" v-if="showInsuranceMoney">
                    <div class="flex-row topTips flex flex-jc-sa"> <p>排名</p><p>地区</p><p>保单数</p><p>保单金额</p> </div>
                    <div class="ranklist flex flex-col">
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">1</p></div><div>北京</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">2</p></div><div>上海</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">3</p></div><div>广东</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">4</p></div><div>河北</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">5</p></div><div>陕西</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">6</p></div><div>甘肃</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">7</p></div><div>辽宁</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">8</p></div><div>河南</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">9</p></div><div>吉林</div><div>5683</div><div>57,237</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">10</p></div><div>青海</div><div>5683</div><div>57,237</div>
                        </div>
                    </div>
                </div>
                <div class="rankSty flex flex-col" v-if="!showInsuranceMoney">
                    <div class="flex-row topTips flex flex-jc-sa"> <p>排名</p><p>地区</p><p>续保单数</p><p>续保率</p> </div>
                    <div class="ranklist flex flex-col">
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">1</p></div><div>北京</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">2</p></div><div>上海</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">3</p></div><div>广东</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">4</p></div><div>河北</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">5</p></div><div>陕西</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">6</p></div><div>甘肃</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">7</p></div><div>辽宁</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">8</p></div><div>河南</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">9</p></div><div>吉林</div><div>9999</div><div>50%</div>
                        </div>
                        <div class="item flex flex-row flex-jc-sa">
                            <div class="flex flex-jc-center"><p class="no">10</p></div><div>青海</div><div>9999</div><div>50%</div>
                        </div>
                    </div>
                </div>
            </div>
            <el-card shadow="always" body-style="padding: 10px;" class="mt20 br10 pdl10">
                <div class="pa radioSty" style="z-index: 940522">
                    <el-radio-group v-model="radio1" @change="change1">
                        <el-radio-button label="近三月"></el-radio-button>
                        <el-radio-button label="近半年"></el-radio-button>
                        <el-radio-button label="近一年"></el-radio-button>
                    </el-radio-group>
                </div>
                <div id="main8" style="width: 100%;height: 500px;"></div>
            </el-card>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card shadow="always" body-style="padding: 10px;" class="br10 pdl10" style="height: 520px;">
                        <div class="title">车辆品牌避险率</div>
                        <div class="pa radioSty2" style="z-index: 940522">
                            <el-radio-group v-model="radio2" @change="change2">
                                <el-radio-button label="近三月"></el-radio-button>
                                <el-radio-button label="近半年"></el-radio-button>
                                <el-radio-button label="近一年"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="pa radioSty3" style="z-index: 940522">
                            <el-radio-group v-model="radio3" @change="change3">
                                <el-radio-button label="近三月"></el-radio-button>
                                <el-radio-button label="近半年"></el-radio-button>
                                <el-radio-button label="近一年"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="flex">
                            <div id="main2" class="flex1" style="width: 30%;height: 100px;"></div>
                            <div id="main2b" class="flex1" style="width: 30%;height: 100px;margin-left: 20%"></div>
                        </div>
                        <div class="label pa flex flex-ai-center"> <p class="txt">{{pushSuccessNums}}</p> </div>
                        <div class="label2 pa flex flex-ai-center"> <p class="txt">{{successNums}}</p> </div>
                        <div class="rankSty flex flex-col cssClear mt5c mb2c">
                            <div class="flex-row topTips flex flex-jc-sa fs14"> <p>排名</p><p>品牌</p><p>通知成功用户数</p><p>主动避险用户数</p><p>避险率</p> </div>
                            <div class="ranklist flex flex-col" v-for="(item,i) in brandRank" :key="i">
                                <div class="item flex flex-row flex-jc-sa">
                                    <div class="flex flex-jc-center"><p class="no" :class="[i>2?'unFullActive':'']">{{i+1}}</p></div><div>{{item.brand}}</div><div>{{item.spareField1}}</div><div>{{item.spareField2}}</div><div>{{item.spareField3}}</div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="always" body-style="padding: 10px;" class="br10 pdl10">
                        <div id="main7" style="height: 500px;"></div>
                    </el-card>
                </el-col>
            </el-row>
            <el-card shadow="always" body-style="padding: 10px;" class="br10 pdl10">
                <div class="selectSty">
                    <el-select v-model="monthValue" @change="selectMonth">
                        <el-option v-for="item in monthData" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div id="main5" style="height: 500px;"></div>
            </el-card>
        </div>
        <div class="bg wh-full"></div>
    </div>
</template>

<script>
import echarts from 'echarts';
import 'echarts/map/js/china'  // 引入echarts china.json
export default {
    name: "OperationsPanel",
    data() {
        return {
            showInsuranceMoney: true,
            radio1: '近三月',
            radio2: '近三月',
            radio3: '近三月',
            pushSuccessNums: this.$translate(8892),
            successNums: this.$translate(2846),
            brandRank: [
                {brand: "丰田", spareField1: "5683", spareField2: "5683", spareField3: "28%"},
                {brand: "大众", spareField1: "5683", spareField2: "5683", spareField3: "28%"},
                {brand: "长安", spareField1: "5683", spareField2: "5683", spareField3: "28%"},
                {brand: "宝马", spareField1: "5683", spareField2: "5683", spareField3: "28%"},
                {brand: "奔驰", spareField1: "5683", spareField2: "5683", spareField3: "28%"}
            ],
            activeClass: 1,
            monthData: [{name: "一月",value: 1}, 
                        {name: "二月",value: 2}, 
                        {name: "三月",value: 3}, 
                        {name: "四月",value: 4}, 
                        {name: "五月",value: 5}, 
                        {name: "六月",value: 6}, 
                        {name: "七月",value: 7}, 
                        {name: "八月",value: 8}, 
                        {name: "九月",value: 9}, 
                        {name: "十月",value: 10}, 
                        {name: "十一月",value: 11}, 
                        {name: "十二月",value: 12} ],
            monthValue: '一月'
        };
    },
    created() {
    },
    watch: {
    },
    mounted() {
        var self = this;
        // getChart1  ---> 地图 
        self.getChart1();
        // getChart2 ---> 车辆品牌避险率-累计通知成功用户数
        self.getChart2();
        // getChart2b ---> 车辆品牌避险率 -累计主动避险用户数
        self.getChart2b();
        // getChart5 ---> 月度奖金发放统计 
        self.getChart5();
        // getChart7 ---> 奖励金发放车辆品牌占比 
        self.getChart7();
        // getChart8 ---> 保单增长统计
        self.getChart8();
    },
    methods: {
        getChart1(){
            var myChart = echarts.init(document.getElementById('main')); 
            var mapName = "china";
            var data = [
                { name: "北京", value: Math.round(Math.random()*1600 + 200)  },
                { name: "上海", value: Math.round(Math.random()*1600 + 200)  },
                { name: "广东", value: Math.round(Math.random()*1600 + 200)  },
                { name: "河北", value: Math.round(Math.random()*1600 + 200)  },
                { name: "陕西", value: Math.round(Math.random()*1600 + 200)  },
                { name: "甘肃", value: Math.round(Math.random()*1600 + 200)  },
                { name: "辽宁", value: Math.round(Math.random()*1600 + 200)  },
                { name: "河南", value: Math.round(Math.random()*1600 + 200)  },
                { name: "吉林", value: Math.round(Math.random()*1600 + 200)  },
                { name: "青海", value: Math.round(Math.random()*1600 + 200)  },
            ];
            var geoCoordMap = {};
            var toolTipData = [
                { name: "北京", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "上海", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "广东", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "河北", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "陕西", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "甘肃", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "辽宁", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "河南", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "吉林", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] },
                { name: "青海", value: [{ name: "保单金额", value: Math.round(Math.random()*2600 + 2000) }] }
                
            ];
            var symbolSizeData = [88 ,80 ,68 ,63 ,55 ,47 ,47 ,44 ,34 ,24]; // 气泡size 【100 ~ 20】
            var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
            mapFeatures.forEach(function(v) {
                var name = v.properties.name;
                geoCoordMap[name] = v.properties.cp;   // 地区经纬度
            });

            var convertData = function(data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value).concat(symbolSizeData[i])
                        });
                    }
                }
                return res;
            };
            var option = {
                tooltip: {
                    trigger: "item",
                    formatter: function(params) {
                        if (typeof params.value[2] == "undefined") {
                            var toolTiphtml = "";
                            for (var i = 0; i < toolTipData.length; i++) {
                                if (params.name == toolTipData[i].name) {
                                    toolTiphtml += toolTipData[i].name + "<br>";
                                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                                        toolTiphtml += toolTipData[i].value[j].name + ":&nbsp;" + toolTipData[i].value[j].value + "<br>";
                                    }
                                }
                            }
                            return toolTiphtml;
                        } else {
                            var toolTiphtml = "";
                            for (var i = 0; i < toolTipData.length; i++) {
                                if (params.name == toolTipData[i].name) {
                                    toolTiphtml += toolTipData[i].name + "<br>";
                                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                                        toolTiphtml += toolTipData[i].value[j].name + ":&nbsp;" + toolTipData[i].value[j].value + "<br>";
                                    }
                                }
                            }
                            return toolTiphtml;
                        }
                    }
                },
                geo: {
                    show: true,
                    map: mapName,
                    left: '5%',
                    layoutSize: 100,
                    label: {
                        normal: { show: false },
                        emphasis: { show: false }
                    },
                    roam: false, // 是否开启鼠标缩放和平移漫游
                    zoom: 1,
                    itemStyle: {
                        normal: {
                            areaColor:  '#8E4DEE',
                            borderColor: "#3B5077"
                        },
                        emphasis: {  // 高亮颜色
                            areaColor: "#3C3A6F"
                        }
                    },
                    regions: [
                        {name: '北京', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '天津', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '上海', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '重庆', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '河北', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '河南', itemStyle: { areaColor: '#E0E0EA' }},
                        {name: '云南', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '辽宁', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '黑龙江', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '湖南', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '安徽', itemStyle: { areaColor: '#E0E0EA' }},
                        {name: '山东', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '新疆', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '江苏', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '浙江', itemStyle: { areaColor: '#E0E0EA' }},
                        {name: '江西', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '湖北', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '广西', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '甘肃', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '山西', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '内蒙古', itemStyle: { areaColor: '#E0E0EA' }},
                        {name: '陕西', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '吉林', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '福建', itemStyle: { areaColor: '#E0E0EA' }},
                        {name: '贵州', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '广东', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '青海', itemStyle: { areaColor: '#D6D5E1' }},
                        {name: '西藏', itemStyle: { areaColor: '#E0E0EA' }},
                        {name: '四川', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '宁夏', itemStyle: { areaColor: '#B1AFCA' }},
                        {name: '海南', itemStyle: { areaColor: '#C4C3D5' }},
                        {name: '台湾', itemStyle: { areaColor: '#B1AFCA' }},
                        {name: '香港', itemStyle: { areaColor: '#B1AFCA' }},
                        {name: '澳门', itemStyle: { areaColor: '#B1AFCA' }}
                    ]
                },
                series: [
                    {
                        name: "点",
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbol: "", //气泡
                        symbolSize: function(val) {
                            return val[3];
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 10,
                                    fontWeight: 'bold'
                                },
                                formatter: function(v){ return v.value[2]}
                            }
                        },
                        itemStyle: {
                            color: 'transparent' //标志颜色
                        },
                        zlevel: 6,
                        data: convertData(data.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 10))
                    },
                    {
                        name: "Top 10",
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        data: convertData(data.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 10)),
                        symbolSize: function(val) {                    
                            return  val[3];                    
                        },
                        showEffectOn: "render", // 绘制完成后显示特效；emphasis：高亮时显示；
                        rippleEffect: {  // 涟漪特效配置
                            brushType: "stroke"  // stroke or fill
                        },
                        hoverAnimation: true,
                        itemStyle: {
                            normal: {
                                color: "#8E4DEE",
                                shadowBlur: 10,
                                shadowColor: "#8E4DEE"
                            }
                        },
                        zlevel: 1
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){ myChart.resize(); });
        },
        getChart2(){
            let d = [];
            for (let i = 0; i < 8; i++) {
                const num = Math.floor(Math.random()*300 + 100);
                d.push(num)                
            }
            var myChart2 = echarts.init(document.getElementById('main2'));
            var option2 = {
                xAxis: { type: 'category', show: false  },
                yAxis: { show: false },
                grid: { left: '-5%', y2: 0 },
                title: {    
                    subtext: '累计通知成功用户数',
                    left: '0',
                    subtextStyle: { color: '#686786', fontSize: 16 }
                },
                series: [
                    {
                        type: 'line',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: { color: '#F3A556', width: 2 },
                        markLine: { symbol: ['none', 'none'], label: {show: false} },
                        markArea: { silent: true },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#F3A556'
                                }, {
                                    offset: 1, color: 'rgba(240,133,76,0.05)'
                                }]
                            }
                        },
                        data: d
                    }
                ]
            };
            myChart2.setOption(option2);
            window.addEventListener("resize",function(){ myChart2.resize(); });
        },
        getChart2b(){
            let d = [];
            for (let i = 0; i < 8; i++) {
                const num = Math.floor(Math.random()*300 + 100);
                d.push(num)                
            }
            var myChart2 = echarts.init(document.getElementById('main2b'));
            var option2 = {
                xAxis: { type: 'category', show: false  },
                yAxis: { show: false },
                grid: { left: '-5%', y2: 0 },
                title: {    
                    subtext: '累计主动避险用户数',
                    left: '0',
                    subtextStyle: { color: '#686786', fontSize: 16 }
                },
                series: [
                    {
                        type: 'line',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: { color: '#8E4DEE', width: 2 },
                        markLine: { symbol: ['none', 'none'], label: {show: false} },
                        markArea: { silent: true },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#8E4DEE'
                                }, {
                                    offset: 1, color: 'rgba(142,77,238,0.05)'
                                }]
                            }
                        },
                        data: d
                    }
                ]
            };
            myChart2.setOption(option2);
            window.addEventListener("resize",function(){ myChart2.resize(); });
        },
        getChart5(m = 1){
            var myChart5 = echarts.init(document.getElementById('main5'));
            var xdata = this.mGetDate(new Date().getFullYear(), m);
            var d1 = [], d2 = [];
            for (const i of xdata) { d1.push(i.name); d2.push(i.value); }
            var option5 = {
                title: {    
                    subtext: '月度奖金发放统计',
                    left: 'left',
                    subtextStyle: { color: '#3C3A6F', fontSize: 16, fontWeight: 'bold' }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: d1,
                    axisLine: { show:true, lineStyle:{ color: '#BBBBBB' } },
                    axisTick: { show:false }
                },
                yAxis:{
                    type: 'value',
                    splitNumber: 4,
                    axisLine: {show:false,lineStyle:{color: '#BBBBBB'}},
                    axisTick: {show:false},
                    splitLine:{ show:true, lineStyle:{color: '#D5D5D5'} }
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    top: '20%',
                    bottom: '2%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: '奖励金',
                    show: false,
                    orient: 'horizontal',
                    icon: 'circle',
                    textStyle: { fontSize: 12 },
                },
                series: [
                    {
                        data: d2,
                        type: 'line',
                        name: '奖励金',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#F19651',
                            width: 4
                        },
                        color: '#F19651',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(240,133,76,0.85)'
                                }, {
                                    offset: 1, color: 'rgba(240,133,76,0.05)'
                                }]
                            }
                        }
                    }
                ]
            };
            myChart5.setOption(option5);
            window.addEventListener("resize",function(){ myChart5.resize(); });
        },
        getChart7(d){
            if(!d){
                d = [
                    {value: 57000, name: '吉利  40%  ¥57,000'},
                    {value: 45000, name: '长城  30%  ¥45,000'},
                    {value: 36000, name: '东风  30%  ¥36,000'},
                    {value: 37000, name: '丰田  30%  ¥37,000'},
                    {value: 30000, name: '大众  30%  ¥32,000'},
                    {value: 32000, name: '恒大  30%  ¥30,000'}
                ];
            }
            let d1 = [];
            for (const item of d) {
                d1.push(item.name);
            }
            var myChart7 = echarts.init(document.getElementById('main7'));
            var option7 = {
                title: {    
                    subtext: '奖励金发放车辆品牌占比',
                    left: 'left',
                    subtextStyle: { color: '#3C3A6F', fontSize: 16, fontWeight: 'bold' }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    left: '65%',
                    top: '30%',
                    itemWidth: 30,
                    itemHeight: 10,
                    itemGap: 25,
                    icon: 'circle',
                    textStyle: { fontSize: 12, color: '#686786' },
                    data: d1
                },
                color:['#8E4DEE', '#F7AB48', '#F87039', '#4E72EE', '#1DCAC2', '#4733D9'],
                series: [
                    {
                        name: '奖励金发放数',
                        type: 'pie',
                        radius: ['52%', '70%'],
                        height: '400px',
                        left: '-30%',
                        top: 'center',
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 32,
                            color: "#3C3A6F",
                            fontWeight: 'bold',
                            rich: {
                                fz: {
                                    fontSize: 14,
                                    color: '#686786'
                                }
                            },
                            formatter: [
                                '{fz|累计发放奖励金额}', '¥240,000'
                            ].join('\n\n')
                        },
                        emphasis: {
                            label: { show: false, fontSize: '16', fontWeight: 'bold' }
                        },
                        labelLine: { show: false },
                        data: d
                    }
                ]
            };
            myChart7.setOption(option7);
            window.addEventListener("resize",function(){ myChart7.resize(); });
        },
        getChart8(d){
            if(!d){
                d = [
                    ['product', '7月1周', '7月2周', '7月3周', '7月4周', '8月1周', '8月2周', '8月3周', '8月4周', '9月1周', '9月2周', '9月3周', '9月4周'],
                    ['保单数', 380, 720, 500, 300, 900, 600, 300, 800, 400, 550, 780, 598]
                ];
            }
            var myChart8 = echarts.init(document.getElementById('main8'));
            var option8 = {
                title: {    
                    subtext: '保单增长统计',
                    left: 'left',
                    subtextStyle: { color: '#3C3A6F', fontSize: 16, fontWeight: 'bold' }
                },
                color:'#F7AB48',
                legend: { show: false, data: '保单数' },
                tooltip: {},
                dataset: { source: d },
                xAxis: [
                    {type: 'category',axisLine: { show:false, lineStyle:{ color: '#BBBBBB' } },axisTick: {show:false}}
                ],
                yAxis: [
                    {splitNumber: 4,show:true,axisLine: {show:false, lineStyle:{ color: '#BBBBBB' }},axisTick: {show:false},
                        splitLine:{ show:false }
                    }
                ],
                grid: [
                    {bottom: '10%',top: '15%',left: '4%',right: '4%'}
                ],
                itemStyle: {
                    barBorderRadius: [30, 30, 0, 0]
                },
                series: [
                    {type: 'bar', barGap: '50%', barWidth: '35%', seriesLayoutBy: 'row', itemStyle:{ color: '#F7AB48' } }
                ]
            };
            myChart8.setOption(option8);
            window.addEventListener("resize",function(){ myChart8.resize(); });
        },
        mGetDate(y, m){   //y-year  m-month  根据传入的年月计算当前月份的天数并返回指定格式
            var d = new Date(y, m, 0);
            var len = d.getDate();
            var arr = [];
            for(var i = 0; i < len; i++ ){
                let str = m + "/" + (i + 1);
                let array = {
                    "name": str,
                    "value": Math.round(Math.random()*2000 + 1500)
                }
                arr.push(array);
            }
            return arr;
        },
        change1(val) {
            // var y = new Date().getFullYear(), m = new Date().getMonth() + 1, dayNums = new Date(y, m, 0).getDate();
            let that = this;
            switch (val) {
                case '近三月':
                    var cData = [
                        ['product', '7月1周', '7月2周', '7月3周', '7月4周', '8月1周', '8月2周', '8月3周', '8月4周', '9月1周', '9月2周', '9月3周', '9月4周'],
                        ['保单数', 380, 720, 500, 300, 900, 600, 300, 800, 400, 550, 780, 598]
                    ];
                    that.getChart8(cData);
                    break;
                case '近半年':
                    var cData2 = [
                        ['product', '4月1周', '\n4月2周', '4月3周', '\n4月4周', '5月1周', '\n5月2周', '5月3周', '\n5月4周', '6月1周', '\n6月2周', '6月3周', '\n6月4周', '7月1周', '\n7月2周', '7月3周', '\n7月4周', '8月1周', '\n8月2周', '8月3周', '\n8月4周', '9月1周', '\n9月2周', '9月3周', '\n9月4周'],
                        ['保单数', 675, 245, 743, 379, 474, 467, 275, 643, 274, 643, 241, 356, 380, 720, 500, 300, 900, 600, 300, 800, 400, 550, 780, 598]
                    ];
                    that.getChart8(cData2);
                    break;
                case '近一年':
                    var cData3 = [
                        ['product', '10月1周', '\n10月2周', '10月3周', '\n10月4周', '11月1周', '\n11月2周', '11月3周', '\n11月4周', '12月1周', '\n12月2周', '12月3周', '\n12月4周', '1月1周', '\n1月2周', '1月3周', '\n1月4周', '2月1周', '\n2月2周', '2月3周', '\n2月4周', '3月1周', '\n3月2周', '3月3周', '\n3月4周', '4月1周', '\n4月2周', '4月3周', '\n4月4周', '5月1周', '\n5月2周', '5月3周', '\n5月4周', '6月1周', '\n6月2周', '6月3周', '\n6月4周', '7月1周', '\n7月2周', '7月3周', '\n7月4周', '8月1周', '\n8月2周', '8月3周', '\n8月4周', '9月1周', '\n9月2周', '9月3周', '\n9月4周'],
                        ['保单数', 675, 456, 663, 325, 561, 357, 852, 574, 358, 495, 268, 135, 675, 375, 374, 748, 764, 485, 463, 743, 532, 124, 642, 325, 675, 245, 743, 379, 474, 467, 275, 643, 274, 643, 241, 356, 380, 720, 500, 300, 900, 600, 300, 800, 400, 550, 780, 598]
                    ];
                    that.getChart8(cData3);
                    break;
            }
        },
        change2(val) {
            let that = this;
            switch (val) {
                case '近三月':
                    that.pushSuccessNums = that.$translate(Math.floor(Math.random()*2000+2000));
                    that.successNums = that.$translate(Math.floor(Math.random()*2000+2000));
                    that.brandRank = [
                        {brand: "大众", spareField1: "5683", spareField2: "5683", spareField3: "28%"},
                        {brand: "丰田", spareField1: "5683", spareField2: "5683", spareField3: "28%"},
                        {brand: "宝马", spareField1: "5683", spareField2: "5683", spareField3: "28%"},
                        {brand: "长安", spareField1: "5683", spareField2: "5683", spareField3: "28%"},
                        {brand: "奔驰", spareField1: "5683", spareField2: "5683", spareField3: "28%"}
                    ];
                    that.getChart2();
                    that.getChart2b();
                    break;
                case '近半年':
                    that.pushSuccessNums = that.$translate(Math.floor(Math.random()*5000+2000));
                    that.successNums = that.$translate(Math.floor(Math.random()*5000+2000));
                    that.brandRank = [
                        {brand: "奔驰", spareField1: "2234", spareField2: "5525", spareField3: "38%"},
                        {brand: "宝马", spareField1: "2234", spareField2: "5525", spareField3: "38%"},
                        {brand: "丰田", spareField1: "2234", spareField2: "5525", spareField3: "38%"},
                        {brand: "大众", spareField1: "2234", spareField2: "5525", spareField3: "38%"},
                        {brand: "长安", spareField1: "2234", spareField2: "5525", spareField3: "38%"},
                    ];
                    that.getChart2();
                    that.getChart2b();
                    break;
                case '近一年':
                    that.pushSuccessNums = that.$translate(Math.floor(Math.random()*7000+2000));
                    that.successNums = that.$translate(Math.floor(Math.random()*7000+2000));
                    that.brandRank = [
                        {brand: "长安", spareField1: "4396", spareField2: "7777", spareField3: "68%"},
                        {brand: "宝马", spareField1: "4396", spareField2: "7777", spareField3: "68%"},
                        {brand: "奔驰", spareField1: "4396", spareField2: "7777", spareField3: "68%"},
                        {brand: "大众", spareField1: "4396", spareField2: "7777", spareField3: "68%"},
                        {brand: "丰田", spareField1: "4396", spareField2: "7777", spareField3: "68%"},
                    ];
                    that.getChart2();
                    that.getChart2b();
                    break;
            }
        },
        change3(val) {
            let that = this;
            switch (val) {
                case '近三月':
                    var cData = [
                        {value: 57000, name: '吉利  40%  ¥57,000'},
                        {value: 45000, name: '长城  30%  ¥45,000'},
                        {value: 36000, name: '东风  30%  ¥36,000'},
                        {value: 37000, name: '丰田  30%  ¥37,000'},
                        {value: 30000, name: '大众  30%  ¥32,000'},
                        {value: 32000, name: '恒大  30%  ¥30,000'}
                    ];
                    that.getChart7(cData);
                    break;
                case '近半年':
                    var cData2 = [
                        {value: 97000, name: '东风  40%  ¥97,000'},
                        {value: 44000, name: '大众  30%  ¥44,000'},
                        {value: 34000, name: '长城  30%  ¥34,000'},
                        {value: 23000, name: '恒大  30%  ¥23,000'},
                        {value: 14000, name: '丰田  30%  ¥14,000'},
                        {value: 11000, name: '吉利  30%  ¥11,000'}
                    ];
                    that.getChart7(cData2);
                    break;
                case '近一年':
                    var cData3 = [
                        {value: 86000, name: '恒大  40%  ¥86,000'},
                        {value: 78000, name: '长城  30%  ¥78,000'},
                        {value: 73000, name: '吉利  30%  ¥73,000'},
                        {value: 63000, name: '东风  30%  ¥63,000'},
                        {value: 61000, name: '大众  30%  ¥61,000'},
                        {value: 27000, name: '丰田  30%  ¥27,000'}
                    ];
                    that.getChart7(cData3);
                    break;
            }
        },
        changeRd(val) { 
            let that = this;
            this.activeClass = val;
            that.showInsuranceMoney = !that.showInsuranceMoney;
            that.getChart1();
        },
        selectMonth(v){
            let that = this;
            if(v !== '一月'){
                that.getChart5(v);    
            }
        }
    },
};
</script>

<style scoped>
    .bg{background: url(../../assets/img/bzxt_bg.png) repeat 100% 100%;position: fixed;top: 9%;left: 0;}
    .title{color: #3C3A6F;font-size: 16px;line-height: 21px;font-family: 'MicrosoftYaHei';font-weight: bold;padding-left: 4px;padding-top: 5px;margin-bottom: 10px !important;}
    .card{width: 23%;border-radius: 8px;display: inline-table;color: #FFFFFF;}
    .card1,.card2,.card3,.card4{padding-bottom: 3%;}
    .card1{background: url(../../assets/img/bzxt_autoai_card_1.png) no-repeat 100% 100%;background-size: 100% 100%;}
    .card2{background: url(../../assets/img/bzxt_autoai_card_2.png) no-repeat 100% 100%;background-size: 100% 100%;}
    .card3{background: url(../../assets/img/bzxt_autoai_card_3.png) no-repeat 100% 100%;background-size: 100% 100%;}
    .card4{background: url(../../assets/img/bzxt_autoai_card_4.png) no-repeat 100% 100%;background-size: 100% 100%;}

    .card .total{font-family: 'DINPro';font-size: 48px;font-weight: bold;padding-top: 5%;padding-left: 5%;}
    .card .tip{font-size: 14px;padding: 5% 0 2% 5%;font-weight: bold;}
    .card .tip img{float: right;margin: 1% 5% 0 0;}
    .card .tips{flex-basis: 30%;padding: 2% 3%;font-weight: 300;background: rgba(0, 0, 0, 0.1);border-radius: 6px;font-size: 10px;letter-spacing: 1px;margin-left: 5%;transform: translateX(-10%) scale(0.85);}
    .card .tips:nth-last-child(1){margin-left: -3%;}
    .card .tips img{padding:0 3%;}

    .rankSty{width: 27%;font-size: 14px;font-family: 'MicrosoftYaHei';position: absolute;right: 5%;text-align: center;}
    .rankSty .topTips{color: #3C3A6F;font-weight: bold;font-size: 15px;}
        .rankSty div,
        .rankSty .topTips p{flex: 1;}
    .rankSty .ranklist{color: #686786;}
        .rankSty .ranklist .item{padding: 5% 0;border-bottom: 1px solid rgba(47,46,70,0.10);}
        .rankSty .ranklist .item:nth-last-child(1){border-bottom: none;}
        .rankSty .ranklist .item .no{border-radius: 50%;overflow: hidden;background-color: rgba(47,46,70,0.10);color: #3C3A6F;width: 20px;height: 20px;line-height: 20px;font-weight: bold;}
        .rankSty .ranklist .item:nth-of-type(1) .no,
        .rankSty .ranklist .item:nth-of-type(2) .no,
        .rankSty .ranklist .item:nth-of-type(3) .no{background-color: #F7AB48;color: #FFFFFF;}
    .unFullActive{background-color: rgba(47,46,70,0.10) !important;color: #3C3A6F !important;}

    .label,.label2 {top: 16%;}
    .label {left: 3%;}
    .label2 {left: 31%;}
    .label img{width: 30px;height: 30px;padding: 5px 10px;}
    .label .txt,.label2 .txt{color: #3C3A6F;font-size: 50px;font-family: "DINPro";font-weight: bold;}

    .radioGroup{top: 18%; left: 3%;}

    /* clear 排名style */
    .cssClear{position: relative;width: inherit;right: 0;}
    .cssClear .item{padding: 2.5% 0 !important;}

    /* radio position */
    .radioSty{right: 2%;margin-top: 1%;}
    .radioSty2{right: 53%;margin-top: -2%;}
    .radioSty3{right: 3%;margin-top: -2%;}

    /* rd */
    .rdSty{position: absolute;z-index: 940522;top: 2%;margin-left: 1%;width: 25%;}
    .rdSty .rd{font-family: 'MicrosoftYaHei';font-size: 14px;opacity: 0.5;color: #3C3A6F;margin-right: 5%;line-height: 25px;cursor: pointer;}
    .rdSty .active:after{content: "";position: absolute;width: 20px;text-align: center;height: 2px;bottom: -10px;background: #3C3A6F;}
    .rdSty .active{font-size: 18px;font-weight: bold;opacity: 1;line-height: 24px;animation: sf 1.2s ease-in-out;}
    @keyframes sf { 0%{opacity: 0.5;} 50%{opacity: 0.8;} 100%{opacity: 1;} }

    /* element select recommit */
    .selectSty{position: absolute;width: 120px;right: 2%;margin-top: 1%;z-index: 940522;}

</style>
